<template>
  <el-card
    :body-style="{ padding: '0px', height: '200px' }"
    style="margin-bottom: 10px"
  >
    <div slot="header" class="clearfix">
      <span>{{ title }}</span>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        icon="refresh"
        @click="loadData"
      >刷新</el-button>
    </div>
    <el-row>
      <el-col :span="24" style="height: 170px; font-size: 8px; padding: 0 10px">
        <div
          v-for="d in data"
          :key="d.id"
          style="
            display: flex;
            align-items: flex-start;
            align-content: flex-start;
            margin: 5px 0;
            color: rgb(64, 158, 255);
          "
        >
          <div style="flex: 1; margin-right: 10px">{{ d.text }}</div>
          <div>{{ d.time }}</div>
        </div>
      </el-col>
      <el-col :span="24">
        <el-button-group style="width: 100%">
          <el-button
            icon="el-icon-circle-plus-outline"
            size="mini"
            style="width: 50%"
            @click="openSideAndOpenAdd"
          />
          <el-button
            icon="el-icon-view"
            size="mini"
            style="width: 50%"
            @click="openSide"
          />
        </el-button-group>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { queryQd } from "@/api/event/qd";
import { queryJc } from "@/api/event/jcjh";
import { queryJf } from "@/api/event/jf";
import { queryTh } from "@/api/event/th";
import { queryLeave } from "@/api/event/leave";
import { queryGkcs } from "@/api/event/gkcs";
import { queryWfxy } from "@/api/event/wfxy";
import { queryDzbg } from "@/api/event/dzbg";
import { queryYzwfxy } from "@/api/event/yzwfxy";
import { queryYwwczl } from "@/api/event/ywwczl";
import { queryWgbg } from "@/api/event/wgbg";
import { queryNdkc } from "@/api/event/ndkc";
import { queryBfPlan } from "@/api/event/bfPlan";
import { queryBfRecord } from "@/api/event/bfRecord";
import { queryBfResult } from "@/api/event/bfResult";
import { queryChangeType } from "@/api/event/changeType";

const EVENT_DICT = {
  qd: { query: queryQd, title: "签到" },
  jcjh: { query: queryJc, title: "检测计划" },
  jf: { query: queryJf, title: "家访" },
  th: { query: queryTh, title: "谈话" },
  leave: { query: queryLeave, title: "请假" },
  gkcs: { query: queryGkcs, title: "管控措施" },
  wfxy: { query: queryWfxy, title: "违反协议" },
  dzbg: { query: queryDzbg, title: "地址变更" },
  yzwfxy: { query: queryYzwfxy, title: "严重违反协议" },
  ywwczl: { query: queryYwwczl, title: "药物维持治疗" },
  wgbg: { query: queryWgbg, title: "违规报告" },
  ndkc: { query: queryNdkc, title: "年度考察" },
  bfjh: { query: queryBfPlan, title: "帮扶计划" },
  bfqk: { query: queryBfRecord, title: "帮扶情况" },
  bfcx: { query: queryBfResult, title: "帮扶成效" },
  rylxzh: { query: queryChangeType, title: "类型转换" },
};

export default {
  name: "UserEventCard",
  props: {
    userId: {
      type: String,
    },
    type: {
      type: String,
    },
    openSideRefFunc: {
      type: Function,
    },
  },
  data() {
    return {
      title: undefined,
      data: [],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    openSide() {
      this.openSideRefFunc().open(this.type, false);
    },
    openSideAndOpenAdd() {
      this.openSideRefFunc().open(this.type, true);
    },
    loadData() {
      this.title = EVENT_DICT[this.type].title || "未知";
      const loadDataFunc = EVENT_DICT[this.type].query;
      if (loadDataFunc) {
        loadDataFunc({ userId: this.userId }).then((res) => {
          this.data = res.data;
        });
      }
    },
  },
};
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
